<template>
	<view class="container">
		<c-navBar title="上报详情" isPerch></c-navBar>
		<view v-if="machineTaskDetail.useStatus == '1' && machineTaskDetail.startStatus == '3'" class="title"
			:style="{ color: '#FF8A00', background: '#FFF3E5' }">上报待审核</view>
		<view v-if="machineTaskDetail.useStatus == '2'" class="title"
			:style="{ color: '#00693A', background: '#DDF0E7' }">待开始</view>
		<view v-if="machineTaskDetail.useStatus == '3'" class="title"
			:style="{ color: '#4280DD', background: '#E5F2FF' }">进行中</view>
		<view v-if="machineTaskDetail.useStatus == '4' && machineTaskDetail.endStatus == '3'" class="title"
			:style="{ color: '#3F41CF', background: '#a7a3cf' }">提交待审核</view>
		<view v-if="machineTaskDetail.useStatus == '5'" class="title"
			:style="{ color: '#1A1A1A', background: '#F5F5F5' }">已完成</view>
		<view v-if="(machineTaskDetail.useStatus == '1' && machineTaskDetail.startStatus == '1')
		|| (machineTaskDetail.useStatus == '4' && machineTaskDetail.endStatus == '1')
		" class="title" :style="{ color: '#E52600', background: '#FFE5E5' }">已驳回</view>
		<view v-if="machineTaskDetail.useStatus == '6'" class="title"
			:style="{ color: '#999999', background: '#F5F5F5' }">已取消</view>
		<view class="content">
			<view class="title1">{{ machineTaskDetail.project.projectName }}</view>
			<view class="text">机器名称：{{ machineTaskDetail.machine.machineName }}</view>
			<view class="text">机器编号：{{ machineTaskDetail.machine.machineNumber }}</view>
			<view class="text">机器型号：{{ machineTaskDetail.machine.machineType }}</view>
			<!-- <view class="text">机器所属单位名称：XXXXXXXX公司</view> -->
			<view class="text">预计使用时间：{{ machineTaskDetail.expectedTime }}</view>
			<view class="text">提交时间：{{ $fn.formatTime(machineTaskDetail.createTime) }}</view>
		</view>
		<view class="line"></view>

		<view class="content1" v-if="machineTaskDetail.startTime">
			<view class="title1">上报信息</view>
			<view class="text">开始使用时间：{{ $fn.formatTime(machineTaskDetail.startTime) }}</view>
			<view class="text">开始使用图片</view>
			<view class="imgs" v-if="machineTaskDetail.startImage">
				<!-- echo -->
				<image v-for="v in machineTaskDetail.startImage.split(',')" :src="vuex_imgUrl + v" mode="widthFix"
					style="width: 200rpx;" @click="previewImg(vuex_imgUrl+v)" />
			</view>

			<view v-if="machineTaskDetail.endTime">
				<view style="width: 100%;height: 1rpx; background: #E6E6E6;margin: 32rpx 0;"></view>
				<view class="text">结束使用时间：{{ $fn.formatTime(machineTaskDetail.endTime) }}</view>
				<view class="text">结束使用图片</view>
				<view class="imgs" v-if="machineTaskDetail.endImage">
					<!-- echo -->
					<image v-for="v in machineTaskDetail.endImage.split(',')" :src="vuex_imgUrl + v" mode="widthFix"
						style="width: 200rpx;" @click="previewImg(vuex_imgUrl+v)" />
				</view>
				<view class="text">说明：{{ machineTaskDetail.endMessage }}</view>
			</view>
		</view>

		<view class="content2" v-if="machineTaskDetail.useStatus == '1' && machineTaskDetail.startStatus == '1'">
			<view class="title1">驳回原因</view>
			<view class="text">{{ machineTaskDetail.startCause }}</view>
			<view class="imgs" v-if="machineTaskDetail.startImage">
				<!-- echo -->
				<c-upLoadImgs v-if="machineTaskDetail.startImage"
					:file.sync="machineTaskDetail.startImage.split(',')"></c-upLoadImgs>
			</view>
		</view>

		<view v-if="machineTaskDetail.useStatus == '6'" class="content3">
			<view class="title1">取消信息</view>
			<view class="text">取消时间：{{ $fn.formatTime(machineTaskDetail.updateTime) }}</view>
			<view class="text">取消原因：{{ machineTaskDetail.cancelCause }}
			</view>
		</view>

		<view v-if="!['5','6'].includes(machineTaskDetail.useStatus)" class="btn-box">
			<!-- 上报待审核 -->
			<view v-if="machineTaskDetail.useStatus =='1' && machineTaskDetail.startStatus =='3'" class="btn"
				@click="cancel">取消</view>

			<!-- 待开始 -->
			<view v-if="machineTaskDetail.useStatus =='2'" class="cancel" @click="cancel">取消</view>
			<view v-if="machineTaskDetail.useStatus =='2'" class="btn1" @click="save">开始使用</view>

			<!-- 进行中 -->
			<view v-if="machineTaskDetail.useStatus =='3'" class="btn" @click="expiration">结束使用</view>

			<!-- 已驳回 -->
			<view v-if="(machineTaskDetail.useStatus == '1' && machineTaskDetail.startStatus == '1')
		|| (machineTaskDetail.useStatus == '4' && machineTaskDetail.endStatus == '1')" class="cancel" @click="rejection">驳回原因
			</view>
			<view v-if="(machineTaskDetail.useStatus == '1' && machineTaskDetail.startStatus == '1')
		|| (machineTaskDetail.useStatus == '4' && machineTaskDetail.endStatus == '1')" class="btn1" @click="reupload">重新上传
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				file: [],
				machineTaskDetail: {
					startTime: ''
				},
				id: null,
			}
		},
		onLoad(e) {
			console.log(e);
			this.id = e.id;
		},
		onShow() {
			this.getMachineTaskDetail();
		},
		methods: {
			// 图片预览
			previewImg(url) {
				console.log(url, 'url');
				uni.previewImage({
					urls: [url]
				})
			},
			getMachineTaskDetail() {
				this.$api.machineTaskDetail({
					id: this.id
				}).then(res => {
					if (res.code == 200) {
						console.log('机器使用上报详情', res)
						this.machineTaskDetail = res.data;
					}
				})
			},
			// 取消事件
			cancel() {
				uni.navigateTo({ // 1：开始任务 ，2：取消任务
					url: `/pages/home/startTask/startTask?type=${2}` + "&name=machine&id=" + this.machineTaskDetail
						.id,
				})
			},
			// 开始使用事件
			save() {
				uni.navigateTo({ // 1：开始任务 ，2：取消任务
					url: `/pages/home/startTask/startTask?type=${1}&name=machine&id=${this.machineTaskDetail.id}&projectName=${this.machineTaskDetail.project.projectName}`,
				})
			},
			// 结束使用事件
			expiration() {
				uni.navigateTo({ // 1：开始任务 ，2：取消任务
					url: `/pages/home/startTask/expiration?name=machine&id=${this.machineTaskDetail.id}&projectName=${this.machineTaskDetail.project.projectName}`,
				})
			},
			// 驳回原因事件
			rejection() {
				uni.navigateTo({
					url: `/pages/home/startTask/rejection?name=machine&id=${this.machineTaskDetail.id}`,
				})
			},
			// 重新上传事件
			reupload() {

				if (this.machineTaskDetail.useStatus == 1) {
					uni.navigateTo({
						url: `/pages/home/report?name=machine&id=` + this.machineTaskDetail.id,
					})
				} else {
					uni.navigateTo({
						url: `/pages/home/startTask/reupload?name=machine&id=${ this.machineTaskDetail.id}&projectName=${this.machineTaskDetail.project.projectName}`,
					})
				}


			},

		}
	}
</script>

<style scoped lang="scss">
	.title {
		width: 750rpx;
		height: 80rpx;

		font-weight: bold;
		font-size: 32rpx;
		line-height: 80rpx;
		text-align: center;
	}

	.content {
		padding: 34rpx;

		.title1 {
			@include ellipsis(1);
			font-weight: bold;
			font-size: 36rpx;
			color: #1A1A1A;
			margin-bottom: 4rpx;
		}

		.text {
			margin-top: 16rpx;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
		}
	}

	.content1,
	.content2,
	.content3 {
		padding: 32rpx;

		padding-bottom: 200rpx;

		.title1 {
			font-weight: bold;
			font-size: 36rpx;
			color: #1A1A1A;
		}

		.text {
			margin-top: 24rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #666666;
		}

		.imgs {
			margin-top: 24rpx;
			display: flex;
			gap: 10rpx;
		}
	}

	.line {
		height: 10rpx;
		background: #F7F7F7;
		border-radius: 0rpx 0rpx 0rpx 0rpx;
	}

	.cancel {
		margin-left: 32rpx;
		text-align: center;
		line-height: 96rpx;
		flex: 1;
		height: 96rpx;
		background: #F5F5F5;
		border-radius: 20rpx 0rpx 0rpx 20rpx;

		font-weight: 500;
		font-size: 36rpx;
		color: #1A1A1A;
	}

	.btn1 {
		margin-right: 32rpx;
		flex: 1;
		height: 96rpx;
		background: linear-gradient(90deg, #208A5B 0%, #00693A 100%);
		border-radius: 0rpx 20rpx 20rpx 0rpx;

		font-weight: bold;
		font-size: 36rpx;
		color: #FFFFFF;
		line-height: 96rpx;
		text-align: center;
	}
</style>